<template>
	<div class="login-container flx-center">
		<div class="login-box">
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" :src="logo" alt="" />
					<h2 class="logo-text">后台管理系统</h2>
				</div>
				<div>
					<a-tabs type="capsule" size="large">
						<a-tab-pane key="1" title="账号密码登陆">
							<a-form ref="loginFormRef" :model="loginForm" layout="vertical" @submit="submitLogin" auto-label-width>
								<a-form-item
									field="userName"
									label="用户名/手机号"
									validate-trigger="input"
									:rules="[{ required: true, message: '用户名/手机号不能为空' }]"
								>
									<a-input v-model="loginForm.userName" placeholder="请输入用户名或手机号..." />
								</a-form-item>
								<a-form-item field="password" label="密码" validate-trigger="input" :rules="[{ required: true, message: '密码不能为空' }]">
									<a-input type="password" v-model="loginForm.password" placeholder="请输入密码..." />
								</a-form-item>
								<a-form-item>
									<slider-check @successFunc="checkSuccess" @errorFunc="checkError" />
								</a-form-item>
								<a-form-item>
									<a-button long size="large" type="primary" html-type="submit" :loading="loading"> 登录 </a-button>
								</a-form-item>
								<a-form-item>
									<a-button long size="large"> 重置 </a-button>
								</a-form-item>
							</a-form>
						</a-tab-pane>
						<a-tab-pane key="2" title="SSO单点登录"> </a-tab-pane>
					</a-tabs>
				</div>
			</div>
		</div>
		<a-layout-footer class="footer"> Copyright © 2023 东软教育科技集团 All Rights Reserved </a-layout-footer>
	</div>
</template>

<script lang="ts" setup>
import logo from '@/assets/images/neuedu-v.04c859db5cc89b24c824a6cdb50b7a2a.svg';
import { ref, reactive, onMounted } from 'vue';
import { User } from '@/api/types';
import { Message, Notification, ValidatedError } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { systemLogin } from '@/api/user';
import { GlobalStore } from '@/stores/global';
import router from '@/routers';
import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME, LOGIN_ROUTE_NAME } from '@/routers/constants';
import { decode } from 'js-base64';
import { TabsStore } from '@/stores/tab';
import { RouteStore } from '@/stores/route';
import { initDynamicRouter } from '@/routers/dynamicRouter';
import SliderCheck from '@/components/SliderCheck/index.vue';

const globalStore = GlobalStore();
const tabStore = TabsStore();

const loginForm = reactive<User.LoginForm>({
	clientId: 'neuedu-web',
	userName: 'mazhihao',
	password: '123456',
});

const { loading, setLoading } = useLoading(false);

const isCheck = ref(false);

const checkSuccess = () => {
	isCheck.value = true;
};

const checkError = () => {
	isCheck.value = false;
};

const submitLogin = async ({ errors, values }: { errors: Record<string, ValidatedError> | undefined; values: Record<string, any> }) => {
	if (loading.value) return;
	try {
		if (!errors) {
			// 验证滑块
			if (!isCheck.value) {
				Message.error('请拖动滑块验证');
				return;
			}
			setLoading(true);
			// 执行登录
			const LoginRes = await systemLogin(loginForm);
			globalStore.setToken(LoginRes.body.accessToken);
			// 获取用户信息
			await globalStore.getUserInfoFromServer();
			Notification.success({ title: '系统登录', content: '登录成功' });
			// 加载动态路由
			await initDynamicRouter();
			// 重定向
			const { redirect, ...othersQuery } = router.currentRoute.value.query;
			let currentRedirect: string = DEFAULT_ROUTE_NAME;
			if (redirect && redirect !== '') {
				const tmpRedirect = decode(redirect as string);
				if (tmpRedirect !== 'undefined') {
					currentRedirect = tmpRedirect;
				}
			}
			await tabStore.closeMultipleTab();
			await router.push({
				name: currentRedirect,
				query: {
					...othersQuery,
				},
			});
		}
	} finally {
		setLoading(false);
	}
};
</script>
<style lang="scss" scoped>
.login-container {
	height: 100%;
	background-color: #eeeeee;
}
.flx-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-box {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	width: 480px;
	height: 600px;
	padding: 0 50px;
	background-color: hsl(0deg 0% 100% / 80%);
	border-radius: 10px;
}
.login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	img {
		width: 200px;
		height: 120px;
	}
	.logo-text {
		margin-top: 30px;
		font-size: 30px;
		font-weight: bold;
		color: #34495e;
		white-space: nowrap;
	}
}
.el-form-item {
	margin-bottom: 40px;
}
.login-btn {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 40px;
	white-space: nowrap;
	.el-button {
		width: 185px;
	}
}
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	color: var(--color-text-2);
	text-align: center;
	position: absolute;
	bottom: 20px;
}
:deep(.arco-tabs-nav) {
	width: 302px;
}
</style>
